<template>
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="常用地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 地址展示区 -->
    <van-cell center v-for="(item, index) in addressList" :key="index">
      <!--center：设置细胞单元格内容垂直居中 -->
      <!-- 地址图标 -->
      <template #right-icon>
        <van-icon name="edit" class="edit-icon" @click="showPopupEdit(item)" />
        <!-- 编辑地址弹出层 -->
        <van-popup
          v-model="show"
          round
          closeable
          position="bottom"
          :style="{ height: '65%' }"
        >
          <!-- 编辑地址弹出层标题  -->
          <div class="newdizhi">常用地址</div>
          <!-- 编辑地址弹出层内容 -->
          <van-form @submit="onSubmit">
            <van-field
              v-model="name"
              name="姓名"
              label="姓名"
              placeholder="请输入收货人姓名"
              :rules="[{ required: true, message: '请输入收货人姓名' }]"
            />
            <van-field
              v-model="call"
              type="call"
              name="电话"
              label="电话"
              placeholder="请输入手机号码"
              :rules="[{ required: true, message: '请输入正确的手机号' }]"
            />
            <div class="diqu">
              <van-cell @click="showPopupAddress">
                <van-field
                  v-model="region"
                  type="region"
                  name="地区"
                  label="地区选择"
                  placeholder="点击选择省市区"
                  :rules="[{ required: true, message: '请选择省市区' }]"
                >
                </van-field>
              </van-cell>
            </div>
            <van-field
              v-model="detailedAddress"
              type="detailedAddress"
              name="地址"
              label="详细地址"
              placeholder="请输入详细地址"
              :rules="[{ required: true, message: '请输入详细地址' }]"
            >
            </van-field>
            <!-- 编辑地址弹出层提交按钮 -->
            <div style="margin: 16px">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                @click="saveaddress"
                >提交</van-button
              >
            </div>
          </van-form>
        </van-popup>
      </template>
      <template #title>
        <span class="custom-title">{{ item.name }}{{ item.tel }}</span>
        <div class="custom-address">
          {{ item.province + item.city + item.area + item.detailedAddress }}
        </div>
      </template>
    </van-cell>
    <!-- 新增地址按钮 -->
    <button class="newaddress" @click="showPopup">
      新增地址
      <van-popup
        v-model="show"
        round
        closeable
        position="bottom"
        :style="{ height: '65%' }"
      >
        <!-- 编辑地址弹出层标题  -->
        <div class="newdizhi">常用地址</div>
        <!-- 编辑地址弹出层内容 -->
        <van-form @submit="onSubmit">
          <van-field
            v-model="name"
            name="姓名"
            label="姓名"
            placeholder="请输入收货人姓名"
            :rules="[{ required: true, message: '请输入收货人姓名' }]"
          />
          <van-field
            v-model="call"
            type="call"
            name="电话"
            label="电话"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请输入正确的手机号' }]"
          />
          <van-field
            v-model="region"
            type="region"
            name="地区"
            label="地区选择"
            placeholder="点击选择省市区"
            :rules="[{ required: true, message: '请选择省市区' }]"
          >
          </van-field>
          <van-field
            v-model="detailedAddress"
            type="detailedAddress"
            name="地址"
            label="详细地址"
            placeholder="请输入详细地址"
            :rules="[{ required: true, message: '请输入详细地址' }]"
          >
          </van-field>
          <!-- 编辑地址弹出层提交按钮 -->
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-popup>
    </button>
    <!-- 地址选择 -->
    <van-popup
      position="bottom"
      round
      :style="{ height: '60%' }"
      v-model="showAddress"
      ><van-area
        :area-list="areaList"
        :value="addressValue"
        @confirm="getAddressValue"
        @cancel="showAddress = false"
    /></van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { mapState } from "vuex";
import { get, post } from "@/http/axios";
export default {
  computed: {
    //使⽤对象展开运算符将此对象混⼊到外部对象中
    ...mapState("user", ["token"]),
  },
  data() {
    return {
      addressValue: "110101",
      show: false,
      name: "", //编辑地址弹出层名字
      call: "", //编辑地址弹出层电话
      region: "", //编辑地址弹出层地区选择
      detailedAddress: "", //编辑地址弹出层详细地址
      chosenAddressId: "",
      addressList: [],
      addressArr: [],
      addressId: "",
      userId: "",
      showAddress: false,
      areaList,
      province: "",
      city: "",
      area: "",
      id: "",
    };
  },
  created() {
    this.getAddress();
  },
  methods: {
    getAddressValue(data) {
      this.region = data[0].name + data[1].name + data[2].name;
      this.province = data[0].name;
      this.city = data[1].name;
      this.area = data[2].name;
      console.log(data);
      this.showAddress = false;
    },
    async saveaddress() {
      let data = {
        id: this.id,
        username: this.name,
        telephone: this.call,
        province: this.province,
        city: this.city,
        area: this.area,
        address: this.detailedAddress,
        isDefault: 1,
        userId: this.userId,
      };
      console.log(data);
      await post("/address/saveOrUpdate", data);
      this.getAddress();
      this.show = false;
      this.showAddress = false;
    },
    //   点击编辑按钮时触发
    showPopupAddress() {
      this.showAddress = true;
    },
    showPopupEdit(row) {
      (this.id = row.id),
        (this.name = row.name),
        (this.call = row.tel),
        (this.detailedAddress = row.detailedAddress),
        (this.province = row.province);
      this.city = row.city;
      this.area = row.area;
      this.region = this.province + this.city + this.area;
      this.show = true;
    },
    showPopup() {
      (this.region = ""),
        (this.id = ""),
        (this.name = ""),
        (this.call = ""),
        (this.detailedAddress = ""),
        (this.province = "");
      this.city = "";
      this.area = "";
      this.show = true;
    },
    // 点击返回按钮时触发
    onClickLeft() {
      this.$router.go(-1);
    },
    // 点击提交按钮时触发
    onSubmit(values) {
      console.log("submit", values);
    },
    async getAddress() {
      this.addressList = [];
      let res1 = await get("/user/info?token=" + localStorage.getItem("token"));
      this.userId = res1.data.data.id;
      let data = {
        page: 1,
        pageSize: 100,
        userId: this.userId,
      };
      let res = await get("/address/pageQuery", data);
      this.addressArr = res.data.data.list;
      this.chosenAddressId = this.addressArr[0].id;
      if (!this.addressArr) {
        return;
      }
      this.addressArr.forEach((item, index) => {
        let addressObj = {};
        addressObj.id = item.id;
        addressObj.name = item.username;
        addressObj.tel = item.telephone;
        // addressObj.address =
        //   item.province + item.city + item.area + item.address;
        addressObj.province = item.province;
        addressObj.city = item.city;
        addressObj.area = item.area;

        addressObj.detailedAddress = item.address;
        addressObj.isDefault = item.isDefault;
        this.addressList.push(addressObj);
      });
      return this.addressList;
    },
  },
};
</script>

<style scoped>
/* 编辑图标样式 */
.edit-icon {
  font-size: 20px;
}
/* 标题样式 */
::v-deep .van-cell {
  font-size: 15px;
}
/* 编辑地址弹出层标题样式 */
.newdizhi {
  text-align: center;
  line-height: 60px;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}
.custom-address {
  color: #969799;
  font-size: 14px;
}
/*  设置新增地址按钮样式*/
.newaddress {
  /* 按钮定位 */
  position: absolute;
  left: 55px;
  top: 530px;
  border-radius: 30px; /*  设置按钮圆角效果*/
  width: 70%; /*  设置按钮宽度*/
  height: 45px; /*  设置按钮高度*/
  background-image: linear-gradient(
    90deg,
    #a4edff,
    #3628f8
  ); /*  设置按钮背景颜色*/
  color: white;
  border: none; /*  设置按钮无边框*/
}

.diqu {
  margin-left: -17px;
}
/* ::v-deep .van-field {
  margin-left: 0px;
} */
</style>